<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}

		body {
			background-color: bisque;
			font-family: "微软雅黑";
		}

		h1,
		h3 {
			font-weight: normal;
			text-align: center;
		}

		.data {
			width: 100%;
			text-align: center;
			margin-top: 800px;
			padding: 1rem
		}

		.data p {
			width: 32%;
			display: inline-block;
			font-size: 32px;
		}
	</style>
</head>
<body>
	<h1 style="margin-top: 800px">我是第一段文字</h1>
	<h1 style="margin-top: 800px">我是第二段文字</h1>
	<div class="data">
		<p class="num">500</p>
		<p class="num">450</p>
		<p class="num">600</p>
	</div>

	<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
	<script src="xRoll.js" charset="utf-8"></script>
	<script type="text/javascript">
		function numAnimate(el, init, max) {
			var timer = setInterval(function() {
				if(init == max) return;
				init++;
				el.html(init);
			}, 10)
		}

		xRoll($('h1').eq(0), function() {
			alert('第一段文字可以执行操作了')
		});

		xRoll($('h1').eq(1), function() {
			alert('第二段文字可以执行操作了')
		});

		// xRoll($('.data'), function() {
		// 	numAnimate($('.data p').eq(0), 0, $.trim($('.data p').eq(0).html()));
		// 	numAnimate($('.data p').eq(1), 0, $.trim($('.data p').eq(1).html()));
		// 	numAnimate($('.data p').eq(2), 0, $.trim($('.data p').eq(2).html()));
		// });
	</script>
</body>
</html>